<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多个背景动态圆</title>
</head>
<body>
    <canvas id="canvas"></canvas>
</body>
<script>
    /** @type {HTMLCanvasElement} */
    let can = document.getElementById("canvas")
    let ctx = can.getContext("2d")
    // 屏幕的宽高
    let width = document.documentElement.clientWidth
    let height = document.documentElement.clientHeight
    can.style.position = 'fixed'
    can.style.display = 'inline-block'  //不出滚动
    can.style.zIndex = '-1'
    can.style.top = '0'
    can.style.left = '0'
    can.width = width
    can.height = height
    can.style.backgroundColor = "antiquewhite"
    // 获取屏幕的尺寸
    function getElementSize(){
        let clientWidth = width
        let clientHeight =  height
        return [clientWidth,clientHeight]
    }
    // 随机生成颜色
    function getRamdomColor(){
        let R = Math.round(Math.random()*255)
        let G = Math.round(Math.random()*255)
        let B = Math.round(Math.random()*255)
        let a = 10
        let rgba = "rgba("+R+","+G+","+B+","+a+")"
        return rgba
    }
     // 获取随机圆形
     function getRamdomCircle(arr){
        let x = Math.random()*arr[0] // [0,1)*width
        let y = Math.random()*arr[1] // [0,1)*height
        let r = Math.random()*25
        let angle = Math.PI*2
        let bool = false
        let rgb = getRamdomColor()
        // let opacity = Math.random()
        let circle = [x,y,r,0,angle,bool,rgb]
        return circle
    }
    // 圆的类
    class Circle{
        constructor(x,y,r,startAngle,endAngle,bool,rgb){
            this.x = x
            this.y = y
            this.r = r
            this.startAngle = startAngle
            this.endAngle = endAngle
            this.bool = bool
            this.strokeColor = rgb
        }
        // 绘画单个圆
        drawCircle(){ 
            ctx.beginPath()
            ctx.fillStyle = this.strokeColor
            ctx.arc(this.x,this.y,this.r,this.startAngle,this.endAngle)
            ctx.fill()
        }
        dynamicRadius(){
            this.r++
            if(this.r>50){
                // 清除该区域圆
                ctx.clearRect(this.x-this.r,this.y-this.r,this.r*2,this.r*2)
                return
            }
            // 下面是重新画圆，每一次半径变化则重新绘画
            ctx.beginPath()
            ctx.fillStyle = this.strokeColor
            ctx.arc(this.x,this.y,this.r,this.startAngle,this.endAngle,this.bool)
            ctx.fill()
        }
    }
// 主程序
    function main(){
        let size = getElementSize()
        let tmpCircle = getRamdomCircle(size)
        let circle = new Circle(tmpCircle[0],tmpCircle[1],tmpCircle[2],tmpCircle[3],
                                tmpCircle[4],tmpCircle[5],tmpCircle[6])
        function draw(){
        // 画单个动态圆                        
            circle.drawCircle()
            circle.dynamicRadius()
            requestAnimationFrame(draw)
        }
        draw()
    }
    setInterval(main,300)
        
</script>
</html>
